/**
 * @page: 物流回传
 * @author:zx
 */

import { useEffect, useState, useMemo } from 'react';
import HeaderTab from '@/components/CommonTab';
import FormRender from '@/components/FormRender';
import TableList from './component/tableList';
import { isEmpty, cloneDeep } from 'lodash';
import { useResize } from '@/hooks/useResize';
import { getFormItem } from './config.js';
import { logisticsListNew, getIndexExpressList } from './service';
import moment from 'moment';

const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const OrderReturn = ({ }) => {
  // tab数据
  const [type, setType] = useState('2');
  // 回传失败条数
  const [fail, setFail] = useState(0);
  // 搜索数据
  const [query, setQuery] = useState({});
  // 分页数据
  const [pages, setPages] = useState({
    current: 1,
    total: 0,
    pageSize: 20,
  });
  // 列表数据
  const [data, setData] = useState([]);
  // 列表勾选项
  const [rowKey, setRowKey] = useState([]);

  //快递下拉
  const [expressList, setExpressList] = useState([])

  const tabArr = [
    //顶部tab信息
    {
      key: '2',
      tab: '回传失败',
      extra: { num: fail },
    },
    {
      key: '0',
      tab: '回传中',
    },
    // {
    //   key: '1',
    //   tab: '回传成功',
    // },
  ];

  //监听变更
  const { el: headerEl, height: headerHeight } = useResize();

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem({
      logisticsId: expressList
    });
  }, [expressList])

  useEffect(() => {
    getExpressList();
  }, [])

  useEffect(() => {
    getLogisticsList();
  }, [type, query, pages.current, pages.pageSize]);

  // 获取快递下拉
  const getExpressList = async () => {
    const { success, data} = await getIndexExpressList({
      type: 1,
      isUpDoor: 0
    });
    if (success) {
       const arr = data.map(v => {
        return {
          label: v.name,
          value: v.id
        }
       })
      setExpressList(arr);
    }
  }

  // 获取列表
  const getLogisticsList = async () => {
    START_LOADING();
    const params = cloneDeep(query);
    if (!isEmpty(query.time)) {
      params.backflowTimeBegin = moment(query.time[0]).format(dateFormat);
      params.backflowTimeEnd = moment(query.time[1]).format(dateFormat);
    } else {
      params.backflowTimeBegin = undefined;
      params.backflowTimeEnd = undefined;
    }
    params.time = undefined;
    // 查询条件收尾去空格
    const params2 = {
      result: type,
      ...params,
      orderSns: params.orderSns?.split(',') || undefined,
      outOrderSns: params.outOrderSns?.split(',') || undefined,
      current: pages.current,
      size: pages.pageSize,
    };
    const { data, success } = await logisticsListNew(params2);
    END_LOADING();
    if (success) {
      if (type == 2) {
        setFail(data.total);
      }
      setData(data.records);
      setRowKey([]);
      setPages({
        ...pages,
        total: data.total
      });
    }
  };

  const HeaderTabProps = {
    type,
    data: tabArr,
    onChange(val) {
      setType(val);
      setPages({
        ...pages,
        current: 1
      });
    },
  };

  //表单渲染组件
  const FormRenderProps = {
    query,
    formArr,
    formConfig: {
      name: 'order-return-form',
      style: { marginBottom: '16px' }
    },
    clickSearch(val) {
      setPages({
        ...pages,
        current: 1
      });
      setQuery(val);
    },
    clickReset() {
      setPages({
        ...pages,
        current: 1
      });
      setQuery({});
    },
  }

  const ListProps = {
    data,
    rowKey,
    type,
    pages,
    setPages,
    headerHeight,
    setRowKey,
    // 刷新列表
    refresh() {
      getLogisticsList();
    },
  };

  return (
    <>
      <HeaderTab {...HeaderTabProps} />
      <div ref={headerEl}>
        <FormRender {...FormRenderProps} />
      </div>
      <TableList {...ListProps} />
    </>
  );
};

export default OrderReturn;